<script setup lang="ts">
defineOptions({
  name: "topologyPages"
});

import { ref, watch, computed, onMounted, onUnmounted, nextTick, inject } from "vue";
import commonIframe from "@/views/common/components/commonIframe/index.vue";
import topologyModel from "./topologyModel.vue";
import { useRouterStoreHook } from "@/store/modules/router";
import { topologyMaps } from "./utils";
import { emitter } from "@/utils/mitt";
import { type SubjectType } from "@/utils/types";
import { queryDictData } from "@/api/common";

const { VITE_PID_AND_TOPO_URL } = import.meta.env;

const routeStore = useRouterStoreHook();
const subject = inject("subject", ref<SubjectType>("MACHINE"));
const loading = ref<boolean>(false);
const topologyUrl = ref<string>("");
const topologyLabels = ref<Array<any>>([]);

const getTopologyLabels = async () => {
  loading.value = true;
  const allTopos = await queryDictData({ typeCode: "PID_AND_TOPO" });
  let ls = null;
  if (subject.value === "GAS") {
    ls = topologyMaps.get(routeStore.getActiveViceMenu);
  } else {
    ls = topologyMaps.get(subject.value);
  }
  topologyLabels.value = allTopos.reduce((pre, cur) => {
    const t = ls.find(item => item.code === cur.value);
    if (t) {
      if (!t?.url) {
        t["url"] = `${VITE_PID_AND_TOPO_URL}${cur.name}`;
      }
      pre.push(t);
    }
    return pre;
  }, []);
  loading.value = false;
};

watch(
  () => subject.value,
  async val => {
    await getTopologyLabels();
  }
);

const selectTopologyHandler = (url?: string) => {
  if (url) {
    topologyUrl.value = url;
  } else {
    topologyUrl.value = null;
  }
};

onMounted(async () => {
  await nextTick();
  await getTopologyLabels();
  if (topologyLabels.value.length) {
    selectTopologyHandler(topologyLabels.value[0]?.url);
  }
  emitter.on("viceMenuChange", async () => {
    if (topologyLabels.value.length) {
      selectTopologyHandler(topologyLabels.value[0]?.url);
    } else {
      selectTopologyHandler();
    }
  });
});

onUnmounted(() => {
  emitter.off("viceMenuChange");
});
</script>

<template>
  <div v-loading="loading" class="topology-pages">
    <div class="topology-iframe">
      <commonIframe v-if="topologyUrl" :key="topologyUrl" :src="topologyUrl" />
      <topologyModel v-else />
    </div>
    <px-scrollbar v-if="topologyLabels?.length" class="topology-scrollbar">
      <div class="topology-items">
        <div
          v-for="item in topologyLabels"
          :key="item.url"
          class="topology-item"
          :class="['topology-item', topologyUrl === item.url ? 'topology-item-selected' : '']"
          @click="selectTopologyHandler(item.url)"
        >
          {{ item.label }}
        </div>
      </div>
    </px-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.topology-pages {
  position: relative;
  width: 100%;
  height: 100%;

  .topology-iframe {
    width: 100%;
    height: 100%;
  }

  .topology-scrollbar {
    position: absolute;
    bottom: 12px;
    left: 50%;
    box-sizing: border-box;
    max-width: calc(100% - 200px);
    height: 60px;
    padding: 14px;
    border-radius: 6px;
    transform: translateX(-50%);

    &:hover {
      background-color: rgb(200 200 200 / 20%);
    }

    .topology-items {
      display: flex;
      flex-wrap: nowrap;
      gap: 14px;
      align-items: center;
      width: 100%;
      height: 100%;

      .topology-item {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        height: 100%;
        padding: 0 16px;
        line-height: 1;
        color: #333;
        text-align: center;
        white-space: nowrap;
        background-color: #fff;
        border-radius: 6px;

        &:hover {
          color: #fff;
          cursor: pointer;
          background-color: var(--px-color-primary);
        }
      }

      .topology-item-selected {
        color: #fff;
        background-color: var(--px-color-primary);
      }
    }
  }
}
</style>
